<div class="analysis-report-page">
    <!-- 页面标题 -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2>
                <i class="fas fa-chart-bar me-2"></i>
                <span id="analysisTitle">分析报告</span>
            </h2>
            <small class="text-muted">
                分析ID：<span id="analysisId">-</span> | 
                状态：<span id="analysisStatusDisplay">-</span>
            </small>
        </div>
        <div>
            <button class="btn btn-outline-secondary" onclick="analysisReport.goBack()">
                <i class="fas fa-arrow-left me-2"></i>返回列表
            </button>
            <button class="btn btn-primary" onclick="window.print()">
                <i class="fas fa-print me-2"></i>打印报告
            </button>
        </div>
    </div>

    <!-- Tab导航 -->
    <ul class="nav nav-tabs mb-4" id="analysisTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="summary-tab" data-bs-toggle="tab" 
                    data-bs-target="#summary" type="button" role="tab">
                <i class="fas fa-list-alt me-2"></i>任务汇总
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="products-tab" data-bs-toggle="tab" 
                    data-bs-target="#products" type="button" role="tab">
                <i class="fas fa-box me-2"></i>商品分析
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="questions-tab" data-bs-toggle="tab" 
                    data-bs-target="#questions" type="button" role="tab">
                <i class="fas fa-question-circle me-2"></i>问句分析
            </button>
        </li>
    </ul>

    <!-- Tab内容 -->
    <div class="tab-content" id="analysisTabContent">
        
        <!-- 模块1：任务汇总 -->
        <div class="tab-pane fade show active" id="summary" role="tabpanel">
            <div class="row">
                <!-- 基础信息卡片 -->
                <div class="col-md-12 mb-4">
                    <div class="card">
                        <div class="card-header bg-primary text-white">
                            <i class="fas fa-info-circle me-2"></i>基础信息
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-3">
                                    <strong>问句数量：</strong><span id="totalQuestions">-</span>
                                </div>
                                <div class="col-md-3">
                                    <strong>采集平台：</strong><span id="totalPlatforms">-</span>
                                </div>
                                <div class="col-md-3">
                                    <strong>采集结果：</strong><span id="totalResults">-</span>
                                </div>
                                <div class="col-md-3">
                                    <strong>识别商品：</strong><span id="totalProducts">-</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 我方产品表现 -->
                <div class="col-md-12 mb-4">
                    <div class="card">
                        <div class="card-header bg-success text-white">
                            <i class="fas fa-star me-2"></i>我方产品表现
                        </div>
                        <div class="card-body">
                            <div class="row mb-3">
                                <div class="col-md-3">
                                    <div class="metric-card">
                                        <div class="metric-value" id="ourProductMentions">0</div>
                                        <div class="metric-label">被推荐次数</div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="metric-card">
                                        <div class="metric-value" id="ourProductCoverageRate">0%</div>
                                        <div class="metric-label">覆盖率</div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="metric-card">
                                        <div class="metric-value" id="ourProductAvgRanking">0</div>
                                        <div class="metric-label">平均排名</div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="metric-card">
                                        <div class="metric-value" id="ourProductCount">0</div>
                                        <div class="metric-label">我方产品数</div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 平台分布表格 -->
                            <h6><i class="fas fa-chart-pie me-2"></i>平台分布</h6>
                            <table class="table table-bordered">
                                <thead class="table-light">
                                    <tr>
                                        <th>平台</th>
                                        <th>推荐次数</th>
                                        <th>占比</th>
                                    </tr>
                                </thead>
                                <tbody id="platformDistribution">
                                    <tr>
                                        <td colspan="3" class="text-center text-muted">暂无数据</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- 竞品表现 -->
                <div class="col-md-12 mb-4">
                    <div class="card">
                        <div class="card-header bg-warning text-dark">
                            <i class="fas fa-users me-2"></i>竞品表现 Top5
                        </div>
                        <div class="card-body">
                            <ol id="competitorList" class="list-group list-group-numbered">
                                <li class="list-group-item text-muted">暂无数据</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 模块2：商品分析 -->
        <div class="tab-pane fade" id="products" role="tabpanel">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <i class="fas fa-box me-2"></i>商品分析列表
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="productTable" class="table table-striped table-hover" style="width: 100%;">
                            <thead>
                                <tr>
                                    <th>排序</th>
                                    <th>商品名称</th>
                                    <th>品牌</th>
                                    <th>标记</th>
                                    <th>推荐次数</th>
                                    <th>问句覆盖</th>
                                    <th>平均排名</th>
                                    <th>Top3次数</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- 模块3：问句分析 -->
        <div class="tab-pane fade" id="questions" role="tabpanel">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <i class="fas fa-question-circle me-2"></i>问句分析列表
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="questionTable" class="table table-striped table-hover" style="width: 100%;">
                            <thead>
                                <tr>
                                    <th style="width: 30px;"></th>
                                    <th style="width: 50px;">ID</th>
                                    <th>问句内容</th>
                                    <th>平台数</th>
                                    <th>识别商品数</th>
                                    <th>我方产品</th>
                                    <th>一致性</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</div>

<!-- 商品详情Modal -->
<div class="modal fade" id="productDetailModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">商品分析详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="productDetailContent">
                加载中...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- 问句详情Modal -->
<div class="modal fade" id="questionDetailModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">问句分析详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="questionDetailContent">
                加载中...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<style>
    .metric-card {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
        text-align: center;
        margin-bottom: 15px;
    }
    .metric-value {
        font-size: 32px;
        font-weight: bold;
        color: #007bff;
    }
    .metric-label {
        font-size: 14px;
        color: #6c757d;
        margin-top: 5px;
    }
    .tab-content {
        min-height: 400px;
    }
    .platform-badge {
        font-size: 12px;
        padding: 4px 8px;
    }
    .our-product {
        background-color: #d4edda !important;
    }
    .competitor {
        background-color: #fff3cd !important;
    }
    
    /* DataTables子行展开样式 */
    td.dt-control {
        cursor: pointer;
        width: 30px;
    }
    
    td.dt-control:before {
        content: '▶';
        color: #007bff;
        font-size: 14px;
        font-weight: bold;
    }
    
    tr.shown td.dt-control:before {
        content: '▼';
        color: #28a745;
    }
    
    /* 子行内容样式 */
    .child-row-content {
        padding: 20px;
        background-color: #f8f9fa;
        border-left: 4px solid #007bff;
        margin: 10px 0;
    }
    
    .platform-section {
        margin-bottom: 15px;
        padding: 10px;
        background-color: white;
        border-radius: 5px;
        border: 1px solid #dee2e6;
    }
    
    .platform-section h6 {
        margin-bottom: 10px;
        color: #495057;
    }
    
    .product-item {
        display: inline-block;
        margin-right: 15px;
        margin-bottom: 8px;
        padding: 5px 10px;
        background-color: #e9ecef;
        border-radius: 4px;
        font-size: 14px;
    }
    
    .product-item.our-product {
        background-color: #d4edda;
        border: 1px solid #c3e6cb;
    }
    
    .product-item.competitor {
        background-color: #fff3cd;
        border: 1px solid #ffeaa7;
    }
    
    .badge-sm {
        font-size: 11px;
        padding: 2px 6px;
        margin-left: 5px;
    }
    
    .ranking-number {
        display: inline-block;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        background-color: #007bff;
        color: white;
        border-radius: 50%;
        font-size: 12px;
        font-weight: bold;
        margin-right: 5px;
    }
</style>

<script src="../../assets/js/pages/analysis-report.js"></script>
